<template>
  <div v-show="visible" class="statistics-report-layer">
    <div class="report-background"></div>
    <div class="report-popbox scroll-bar">
      <!-- 报告头部 -->
      <div class="report-head">
        <div class="report-title">
          <div class="title-block"></div>
          <span class="title-script">Report Result</span>
          <!-- 关闭icon -->
          <div class="report-close" @click="closeReport()">
            <a-icon-font type="iconicon-beifen1-copy" class="icon-close" />
          </div>
        </div>
        <div class="content-title">
          <span>{{ currentStatisticsParameter.name }}报告</span>
        </div>
      </div>
      <!-- 报告内容 -->
      <div class="report-content">
        <div class="content-subtitle">
          <div v-for="item in currentResult" :key="item.key">
            <span class="subtile"> {{ item.key }}: </span>
            <span class="subtitle-result">{{ item.value }}</span>
          </div>
        </div>
        <div class="content-result">
          <div class="text-section">
            <div class="result-title">
              {{ currentStatisticsParameter.description }}
            </div>
            <div class="result-describtion">
              <p v-html="currentStatisticsParameter.detail"></p>
            </div>
          </div>
          <div ref="chartSection" class="chart-section"></div>
        </div>
      </div>
    </div>
    <!-- 左右翻页icon -->
    <div class="icon-change-page">
      <div v-show="leftShow" class="to-left change-page" @click="toFrontPage">
        <div class="hover-background change-page"></div>
        <a-icon-font type="iconhuaban1" class="icon" />
      </div>
      <div v-show="rightShow" class="to-right change-page" @click="toNextPage">
        <div class="hover-background change-page"></div>
        <a-icon-font type="iconhuaban1" class="icon" />
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { Vue, Prop, Component } from 'vue-property-decorator'
import { ScatterChart } from '@zjlabvis/vis-charts'
import {
  statisticsParameters,
  statisticsPageOrder,
} from '@/components/right-drawer/data-statistics/data-statistics'

@Component({})
export default class DataAnalysisReport extends Vue {
  @Prop() visible!: boolean
  @Prop() reportData: any

  private pageOrder: any = statisticsPageOrder // 展示顺序
  private pageExist: any = [] // 可以展示的页面
  private pageNum: number = 1 // 当前页数
  private pageIndex: number = 0 // 当前页数在pageExist中的索引
  private get leftShow(): boolean {
    return this.pageIndex !== 0
  }

  private get rightShow(): boolean {
    return this.pageIndex !== this.pageExist.length - 1
  }

  private currentStatisticsParameter: any = statisticsParameters[this.pageNum] // 当前展示数据信息

  private valueKey: string = 'count'
  private labelKey: string = 'value'
  private chartType: string = 'scatterplot'
  private chartConfig: any = {
    value: [],
    valueKey: this.valueKey,
    labelKey: this.labelKey,
    xAxisFontColor: '#373B52',
    yAxisFontColor: '#373B52',
    xAxisTitleFontSize: 14,
    yAxisTitleFontSize: 14,
    axisTitleIsShow: true,
    padding: [10, 10, 10, 10],
    size: [500, 360],
  }

  private currentResult: any = [] // 当前结果
  private multiChartConfig: any = []
  private multiChartData: any = []

  private isAvailable(index: number) {
    switch (index) {
      case 1: // 平均度
        return this.reportData.MeanDegree.value !== undefined
      case 2: // 平均加权度
        return this.reportData.MeanWeightedDegree.value !== undefined
      case 3: // 图密度
        return this.reportData.Density.value !== undefined
      case 4: // 连通分量
        return this.reportData.ConnectedComponents.value !== undefined
      case 5: // 网络直径
        return this.reportData.Diameter.value !== undefined
      case 6: // 聚类系数
        return this.reportData.ClusteringCoefficient.value !== undefined
      case 7: // 特征向量中心度
        return this.reportData.EigenvectorCentrality.detail !== undefined
      case 8: // 平均路径长度
        return this.reportData.AvgDist.value !== undefined
      case 9: // 社团检测
        return this.reportData.Cluster.detail !== undefined
      case 10: // PageRank
        return this.reportData.PageRank.detail !== undefined
      default:
        // 4-连通分量 6-聚类系数
        return false
    }
  }

  public mounted() {}

  public beforeDestroy() {}

  private closeReport() {
    this.$emit('closeReport', false)
  }

  public init(index: number) {
    this.pageNum = index
    this.pageExist = []
    this.pageOrder.forEach((pageId: number) => {
      if (this.isAvailable(pageId) && statisticsParameters[pageId].reportIcon) {
        this.pageExist.push(pageId)
        if (pageId === this.pageNum) {
          this.pageIndex = this.pageExist.length - 1
        }
      }
    })
    this.changePage(this.pageNum)
  }

  public toFrontPage() {
    this.pageIndex -= 1
    this.pageNum = this.pageExist[this.pageIndex]
    this.changePage(this.pageNum)
  }

  public toNextPage() {
    this.pageIndex += 1
    this.pageNum = this.pageExist[this.pageIndex]
    this.changePage(this.pageNum)
  }

  public changePage(index: number) {
    this.currentStatisticsParameter = statisticsParameters[index]
    this.currentResult = []
    this.multiChartData = []
    this.multiChartConfig = []
    this.valueKey = 'count'
    this.labelKey = 'value'

    switch (index) {
      case 1: {
        // 平均度
        this.currentResult = [
          {
            key: this.currentStatisticsParameter.result[0],
            value: this.reportData.MeanDegree.value,
          },
        ]
        this.multiChartData.push({
          chartData: this.reportData.MeanDegree.detail,
        })
        break
      }
      case 2: {
        // 平均加权度
        this.currentResult = [
          {
            key: this.currentStatisticsParameter.result[0],
            value: this.reportData.MeanWeightedDegree.value,
          },
        ]
        this.multiChartData.push({
          chartData: this.reportData.MeanWeightedDegree.detail,
        })
        break
      }
      case 3: {
        // 图密度
        break
      }
      case 4: {
        // 连通分量
        this.labelKey = 'size(number of nodes)'
        if (this.reportData.ConnectedComponents.ConnectedComponents) {
          // 无向图
          this.currentResult = [
            {
              key: this.currentStatisticsParameter.result[0],
              value: this.reportData.ConnectedComponents.ConnectedComponents
                .value,
            },
          ]
          this.multiChartData.push({
            chartData: this.reportData.ConnectedComponents.ConnectedComponents
              .detail,
          })
        } else {
          // 有向图
          this.currentResult = [
            {
              key: this.currentStatisticsParameter.result[1],
              value: this.reportData.ConnectedComponents
                .WeaklyConnectedComponents.value,
            },
            {
              key: this.currentStatisticsParameter.result[2],
              value: this.reportData.ConnectedComponents
                .StronglyConnectedComponents.value,
            },
          ]
          this.multiChartData.push({
            name: 'WeaklyConnectedComponents',
            chartData: this.reportData.ConnectedComponents
              .WeaklyConnectedComponents.detail,
          })
          this.multiChartData.push({
            name: 'StronglyConnectedComponents',
            chartData: this.reportData.ConnectedComponents
              .StronglyConnectedComponents.detail,
          })
        }
        break
      }
      case 5: {
        // 网络直径
        this.currentResult = [
          {
            key: this.currentStatisticsParameter.result[0],
            value: this.reportData.Diameter.value,
          },
        ]
        this.multiChartData.push({
          name: 'ClosenessCentrality',
          chartData: this.reportData.ClosenessCentrality.detail,
        })
        this.multiChartData.push({
          name: 'BetweennessCentrality',
          chartData: this.reportData.BetweennessCentrality.detail,
        })
        this.multiChartData.push({
          name: 'Eccentricity',
          chartData: this.reportData.Eccentricity.detail,
        })
        break
      }
      case 6: {
        // 聚类系数
        this.currentResult = [
          {
            key: this.currentStatisticsParameter.result[0],
            value: this.reportData.ClusteringCoefficient.value,
          },
          {
            key: this.currentStatisticsParameter.result[1],
            value: this.reportData.Triangles.value,
          },
        ]
        this.multiChartData.push({
          chartData: this.reportData.ClusteringCoefficient.detail,
        })
        break
      }
      case 7: {
        // 特征向量中心度
        this.multiChartData.push({
          chartData: this.reportData.EigenvectorCentrality.detail,
        })
        break
      }
      case 8: {
        // 平均路径长度
        this.currentResult = [
          {
            key: this.currentStatisticsParameter.result[0],
            value: this.reportData.AvgDist.value,
          },
        ]
        this.multiChartData.push({
          name: 'ClosenessCentrality',
          chartData: this.reportData.ClosenessCentrality.detail,
        })
        this.multiChartData.push({
          name: 'BetweennessCentrality',
          chartData: this.reportData.BetweennessCentrality.detail,
        })
        this.multiChartData.push({
          name: 'Eccentricity',
          chartData: this.reportData.Eccentricity.detail,
        })
        break
      }
      case 9: {
        // 社团检测算法
        this.currentResult = [
          {
            key: this.currentStatisticsParameter.result[0],
            value: this.reportData.Cluster.clusterNum,
          },
        ]
        this.multiChartData.push({
          chartData: this.reportData.Cluster.detail
        })
        this.valueKey = 'size'
        this.labelKey = 'cluster'
        break
      }
      case 10: {
        // pageRank算法
        this.multiChartData.push({
          chartData: this.reportData.PageRank.detail,
        })
        break
      }
      default: {
        console.log('default')
      }
    }

    const chartSectionDoms = this.$refs.chartSection as HTMLElement
    chartSectionDoms.innerHTML = ''

    this.multiChartData.forEach((item: { name: string; chartData: any }) => {
      const chartConfig = {
        ...this.chartConfig,
        value: item.chartData,
        title: item.name ? item.name : ' ',
        valueKey: this.valueKey,
        labelKey: this.labelKey,
      }

      const chartDiv = document.createElement('div')
      // eslint-disable-next-line no-new
      new ScatterChart(chartDiv, chartConfig)
      chartSectionDoms.appendChild(chartDiv)
    })
  }
}
</script>

<style lang="less" scoped>
@import '@/styles/scroll-bar';

.statistics-report-layer {
  bottom: 0;
  left: 0;
  position: fixed;
  right: 0;
  top: 0;
  z-index: 1000;

  .report-background {
    background: #000;
    height: 100%;
    opacity: 0.75;
    width: 100%;
  }

  .report-popbox {
    background: #fff;
    bottom: 0;
    left: 0;
    margin: auto;
    max-height: 800px;
    min-height: 580px;
    overflow: auto;
    position: absolute;
    right: 0;
    top: 0;
    width: 672px;

    .report-head {
      .report-title {
        align-items: center;
        border-bottom: 2px solid #404773;
        display: flex;
        height: 30px;
        margin-top: 15px;
        padding-bottom: 10px;
        width: 100%;

        .title-block {
          background: #404773;
          float: left;
          height: 100%;
          width: 16px;
        }

        .title-script {
          color: #373b52;
          float: left;
          letter-spacing: 1px;
          margin-left: 22px;
        }

        .report-close {
          cursor: pointer;
          height: 25px;
          margin-left: auto;
          margin-right: 10px;
          width: 25px;

          .icon-close {
            color: #000;
            font-size: 25px;
          }
        }
      }

      .content-title {
        color: #373b52;
        font-size: 28px;
        font-weight: 600;
        letter-spacing: 2px;
        margin-top: 10px;
        text-align: center;
      }
    }

    .report-content {
      margin: 0 20px 20px;

      .content-subtitle {
        border-bottom: 1px dashed #e9e9e9;
        color: #373b52;

        .subtile {
          font-size: 16px;
          letter-spacing: 1px;
        }

        .subtitle-result {
          font-size: 20px;
          letter-spacing: 1.43px;
        }
      }

      .content-result {
        border: 1px solid #e9e9e9;
        margin-top: 22px;
        overflow-x: hidden;
        overflow-y: auto;
        padding: 20px 20px 0;
        width: 596px;

        .text-section {
          .result-title {
            color: #373b52;
            font-size: 16px;
            letter-spacing: 1px;
          }

          .result-describtion {
            color: #808080;
            font-size: 12px;
            text-align: left;
          }
        }

        .no-chart {
          position: relative;
          text-align: center;
          top: 50%;
          transform: translateY(-90%);
        }
      }

      .chart {
        margin-top: 30px;
      }
    }

    .no-result {
      left: 50%;
      position: absolute;
      top: 50%;
      transform: translateY(-50%) translateX(-50%);
    }
  }

  .icon-change-page {
    text-align: center;

    .change-page {
      cursor: pointer;
      font-size: 40px;
      height: 112px;
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      width: 60px;
    }

    .hover-background {
      &:hover {
        background: #fff;
        border: 1px solid #d9d9d9;
        border-radius: 4px;
        opacity: 0.2;
      }
    }

    .to-left {
      left: calc(50% - 432px);
      transform: rotateY(180deg) translateY(-50%);
    }

    .to-right {
      left: calc(50% + 372px);
    }

    .icon {
      margin-top: 36px;
    }
  }
}
</style>
